<template>
  <div>
      <home-search></home-search>
      <img :src="activity.img" class="activity-img">
      <home-banner :data="banner1.items"></home-banner>
      <home-grid :data="Category"></home-grid>
      <img src="../assets/jlzx.png" class="jlzx-img">
      <hot-list :data="banner2.items"></hot-list>
  </div>
</template>

<script>
import HomeSearch from '@/components/home-search'
import HomeBanner from '@/components/home-banner'
import HomeGrid from '@/components/home-grid'
import HotList from '@/components/hot-list'
import { Activity } from '@/model/activity'
import { Banner } from '@/model/banner'
import { Category } from '@/model/category'
export default {
  components: {
    HomeSearch,
    HomeBanner,
    HomeGrid,
    HotList
  },
  data () {
    return {
      activity: {},
      banner1: {},
      Category: [],
      banner2: {}
    }
  },
  async created () {
    await this.init()
  },
  methods: {
    async init () {
      this.activity = await Activity.getHomeActivity()
      this.banner1 = await Banner.getHomeBannerB1()
      this.Category = await Category.getHomeGrid()
      this.banner2 = await Banner.getHomeBannerB2()
    }
  }
}
</script>

<style lang="scss" scoped>
    .activity-img{
      width: 6.9rem;
      height: 3.4rem;
      margin-left: .3rem;
      margin-top: .2rem;
      margin-bottom: .3rem;
    }
    .jlzx-img{
      width: 100%;
      height: 7.4rem;
    }
</style>
